<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>银子：{{ money }}w</h4>
    <h4>车子：一辆{{ car.brand }}价值{{ car.price }}w</h4>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
import { provide, reactive, ref } from "vue";
import Child from "./Child.vue";

let money = ref(100);
let car = reactive({
  brand: "奔驰",
  price: "199",
});
function updateMoney(value: number) {
  money.value -= value;
}

// 向后代提供数据和方法 provide(名,值) ref定义的数据加了.value数据不再为响应式
provide("moneyContext", { money, updateMoney });
provide("car", car);
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
